<template>
  <el-row style="height: calc(100% - 50px);">
    <el-col :span="10" style="height: 100%;">
      <div ref="dom" style="width: 100%; height: 250px" v-loading="chartLoading"></div>
    </el-col>
    <el-col :span="14">
      <el-row>
        <el-col :span="10">
          <span>品类</span>
        </el-col>
        <el-col :span="8" class="title" style="text-align: right;">
          <span>{{ type === 'stock' ? '库存(吨)' : '金额(元)' }}</span>
        </el-col>
      </el-row>
      <div v-if="data.length > 0">
        <el-row v-for="(item, index) in data" :key="index" style="margin-top: 5px">
          <el-col :span="10">
            <div class="desc" :style="{'--color': colorData[index].color1}" :title="item.name">
              {{ item.name }}
            </div>
          </el-col>
          <el-col v-if="type === 'stock'" :span="8" class="data" style="text-align: right;">{{ Number(Number(item.value).toFixed(3)).toLocaleString('zh', {minimumFractionDigits: 3}) }}</el-col>
          <el-col v-if="type === 'fee'" :span="8" class="data" style="text-align: right;">{{ Number(Number(item.value).toFixed(2)).toLocaleString('zh', {minimumFractionDigits: 2}) }}</el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-col :span="10">
            <div>
              <span v-if="type === 'stock'">TOP5 合计</span>
              <span v-else>合计</span>
            </div>
          </el-col>
          <el-col v-if="type === 'stock'" :span="8" class="data" style="text-align: right;">{{ Number(data.reduce((sum, item) => sum + Number(item.value), 0).toFixed(3)).toLocaleString('zh', {minimumFractionDigits: 3}) }}</el-col>
          <el-col v-if="type === 'fee'" :span="8" class="data" style="text-align: right;">{{ Number(data.reduce((sum, item) => sum + Number(item.value), 0).toFixed(3)).toLocaleString('zh', {minimumFractionDigits: 2}) }}</el-col>
        </el-row>
      </div>
      <div v-else class="no-data">
        <p>暂无数据</p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {useHttp} from "@/view/wms/js/index";
import _ from 'lodash';
import * as echarts from 'echarts';
import 'echarts/theme/macarons.js';
import {getAllType} from "@/api/warehouse/home";
export default {
  name: "MatTypeTopFive",
  data() {
    return {
      chartLoading: false,
      stockList: [],
      data: [],
      chart: null,
      type: 'stock',
      colorData: [
        {shadowColor1: 'rgba(122,74,255, 0.4)', shadowColor2: 'rgba(122,74,255, 1)', color1: '#9B66FF', color2: '#6236FF'},
        {shadowColor1: 'rgba(236,102,255, 0.4)', shadowColor2: 'rgba(236,102,255, 1)', color1: '#EC66FF', color2: '#B620E0'},
        {shadowColor1: 'rgba(245,114,164, 0.4)', shadowColor2: 'rgba(245,114,164, 1)', color1: '#F572A4', color2: '#D72552'},
        {shadowColor1: 'rgba(238,101,0,0.4)', shadowColor2: 'rgba(238,101,0,1)', color1: '#FD9D00', color2: '#FA6400'},
        {shadowColor1: 'rgba(247,181,0, 0.4)', shadowColor2: 'rgba(247,181,0, 1)', color1: '#FCDB00', color2: '#F7B500'},
        {shadowColor1: 'rgba(130,221,0, 0.4)', shadowColor2: 'rgba(130,221,0, 1)', color1: '#A6EC00', color2: '#6DD400'},
        {shadowColor1: 'rgba(88,224,196, 0.4)', shadowColor2: 'rgba(88,224,196, 1)', color1: '#79EDDC', color2: '#44D7B6'},
        {shadowColor1: 'rgba(0,176,255, 0.4)', shadowColor2: 'rgba(0,176,255, 1)', color1: '#00C4FF', color2: '#0091FF'},
        {shadowColor1: 'rgba(49, 189, 209, 0.4)', shadowColor2: 'rgba(49, 189, 209, 1)', color1: '#31BDD1', color2: '#4388C6'},
        {shadowColor1: 'rgba(114, 151, 255, 0.4)', shadowColor2: 'rgba(114, 151, 255, 1)', color1: '#7297FF', color2: '#364BEC'},
        {shadowColor1: 'rgba(255, 114, 10, 0.4)', shadowColor2: 'rgba(255, 114, 10, 1)', color1: '#ff6808', color2: '#ec6a06'}
      ]
    }
  },
  methods: {
    async init(wmsUrl, whCode, ownerCodeList) {
      if (!wmsUrl) {
        return console.error('WMS http 为空！');
      }

      this.chartLoading = true;
      const resMat = await getAllType('MAT_TYPE', wmsUrl);
      let matTypeList = resMat.data.returnData;


      useHttp('/api/wms_stock/matPieChart', {
        notInMatTypeCodeList: ["9999", "0001"],
        whCodeList: whCode,
        ownerCodeList
      }, wmsUrl).then(res => {
        const response = res.data;
        if (response.returnCode === 200) {
          let data = response.returnData.sort((a, b) => b.stockWeight - a.stockWeight).slice(0, 5);
          data.forEach(i => {
            i.name = this.$formatterDict(i.matTypCode, matTypeList);
            i.value = (i.stockWeight / 1000).toFixed(3);
          });
          console.log(data);
          this.stockList = data;
          this.$nextTick(() => {
            this.initEchart(data);
          });
        } else {
          this.$Message.error(response.returnMsg);
        }
      }).finally(() => {
        this.chartLoading = false;
      });
    },
    initEchart(list) {
      this.data = [];
      list = list.length > 11 ? list.slice(0, 11) : list;
      for (let i = 0, len = list.length; i < len; i++) {
        let dataItem = list[i];
        let colorItem = this.colorData[i];
        this.data.push({
          value: dataItem.value,
          name: dataItem.name,
          total: dataItem.approximateWeight,
          itemStyle: {
            shadowBlur: 15,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: colorItem.shadowColor1,
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: colorItem.color1 },
                { offset: 1, color: colorItem.color2 }
              ]
            ),
            emphasis: {
              shadowBlur: 15,
              shadowColor: colorItem.shadowColor2,
              borderColor: '#ffffff',
              borderWidth: 0
            }
          }
        });
      }
      let option = {
        tooltip: {
          show: true,
          position: function (point, params, dom, rect, size) {
            let x = point[0];
            let y = point[1];
            // let viewWidth = size.viewSize[0];
            // let viewHeight = size.viewSize[1];
            let boxWidth = size.contentSize[0];
            let boxHeight = size.contentSize[1];
            let posX = 0;
            let posY = 0;

            if (x < boxWidth) {
              posX = 5;
            } else {
              posX = x - boxWidth;
            }
            if (y < boxHeight) {
              posY = 5;
            } else {
              posY = y - boxHeight;
            }
            return [posX, posY];
          },
          formatter: `{b} <br/> {c}${this.type === 'stock' ? '吨' : '元'} ({d}%)`
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['42%', '80%'],
            center: ['50%', '50%'],
            clockwise: false,
            avoidLabelOverlap: false,
            hoverOffset: 10,
            legendHoverLink: true,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '20',
                  fontWeight: '400'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#ffffff'
              }
            },
            data: this.data
          }
        ]
      };

      if (this.data.length <= 0) {
        option = {
          tooltip: {
            show: false
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['42%', '80%'],
              center: ['50%', '50%'],
              clockwise: false,
              avoidLabelOverlap: false,
              hoverOffset: 10,
              legendHoverLink: true,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: '20',
                    fontWeight: '400'
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: '400'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#ffffff'
                }
              },
              data: [{
                value: 0,
                name: '暂无数据',
                itemStyle: {
                  shadowBlur: 15,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowColor: 'rgba(238,101,0,0.4)',
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#FD9D00' },
                      { offset: 1, color: '#FA6400' }
                    ]
                  ),
                  emphasis: {
                    shadowBlur: 15,
                    shadowColor: 'rgba(238,101,0,1)',
                    borderColor: '#ffffff',
                    borderWidth: 0
                  }
                }
              }
              ]
            }
          ]
        };
      }
      this.chart = echarts.init(this.$refs.dom);
      this.chart.setOption(option);
      window.addEventListener('resize', this.resize);
    },
    resize() {
      this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>
.desc {
  position: relative;
  text-indent: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc::before {
  position: absolute;
  content: "";
  top: 4px;
  left: 0;
  width: 10px;
  height: 8px;
  border-radius: 2px;
  background: var(--color);
}
</style>
<style lang="less" scoped>
.no-data {
  text-align: center;
  margin-top: 100px;
  text-indent: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #a8a8a8;
}
.title {
  font-size: 12px;
  color: #a8a8a8;
  text-align: center;
}
.data {
  text-align: center;
  font-weight: bold;
}
</style>
